<template>
<div>
  <div class="home">
    <HeadView />  
    <div class="homg-bg-box content wow bounceIn">
      <h3>Web3 Face Web3 and the Metaverse Decentralized Social Platform.</h3>
      <p>Here, you can implement secure communication, use digital currency multi-chain wallets, Dapp browsers, communication SDKs and other tools...</p>
      <div class="but_down">
        <span><a href=""><el-icon><Download /></el-icon>  Mac 版下载</a></span>
        <span><a href=""><i></i> 在浏览器中打开mask </a></span>
      </div>
    </div>
  </div>

  <div class="home-con">
    <div class="content">
      <el-row :gutter="0" align="middle">
        <el-col :span="12" :xs="24" class="wow slideInLeft">
          <img class="home1-img" src="@/assets/img/home1.png" alt="" >
        </el-col>
        <el-col :span="12" :xs="24" class="wow slideInRight">
          <div class="home1-r">
            <h4>
              Open standards for secure, <br /> distributed, real-time communications
            </h4>
            <p>Message type: text, picture, voice message, <br />real-time voice and video,<br /> multi-person audio and video conference</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

  <div class="bgc home-con">
    <div class="content">
      <el-row :gutter="0" align="middle">
        <el-col :span="10" :xs="24" class="wow slideInLeft">
          <div class="home1-l">
            <h4>
              Digital currency<br /> multi-chain wallet
            </h4>
            <p>1. The private key is stored locally and protected<br /> by multiple layers of encryption<br />
                2. Cross-chain<br />
                3. Highly integrated social [open robot + wallet + social]<br />
                4. DApp Browser + Open Robot<br /></p>
          </div>
        </el-col>
        <el-col :span="14" :xs="24" class="wow slideInRight">
          <img class="home1-img" src="@/assets/img/home2.png" alt="" >
        </el-col>
      </el-row>
    </div>
  </div>

  <div class="home-con">
    <div class="content">
      <el-row :gutter="0" align="middle">
        <el-col :span="12" :xs="24" class="wow slideInLeft">
          <img class="home1-img" src="@/assets/img/home3.png" alt="" >
        </el-col>
        <el-col :span="12" :xs="24" class="wow slideInRight">
          <div class="home1-r">
            <h4>
              Powerful face recognition function
            </h4>
            <p>1. Register and log in to scan<br />
              2. Support third-party login Google <br />Facebook Twitter AppleID Gitlab
              <br />[Not included in the official version, <br />because it involves the certification and authorization of third-party organizations]</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

  <div class="bgc home-con">
    <div class="content">
      <el-row :gutter="0" align="middle">
        <el-col :span="10" :xs="24" class="wow slideInLeft">
          <div class="home1-l">
            <h4>
              Bridge via<br /> official bot 
            </h4>
            <p>Realize the use of web3face to<br /> communicate with telegram whatsapp<br /> wechat, etc. [Wechat does not <br />support voice information]</p>
          </div>
        </el-col>
        <el-col :span="14" :xs="24" class="wow slideInRight">
          <img class="home1-img" src="@/assets/img/home4.png" alt="" >
        </el-col>
      </el-row>
    </div>
  </div>

  <div class="home-con home-con-tc">
    <div class="content">
      <el-row :gutter="0" align="middle">
        <el-col :span="24" :xs="24" class="wow slideInLeft">
          <div class="home1-r home1-lr">
            <h4>DAPP browser [NFT transaction, swap transaction]</h4>
            <p>1. Real-time tracking of dynamic faces to generate real-time NFT avatars   
              2. Avatars can be sold for sale   
              3. Digital trading OTC in social form   
              4. Third-party community building</p>
          </div>
        </el-col>
        <el-col :span="24" :xs="24" class="wow slideInRight">
          <img class="home1-img" src="@/assets/img/home5.png" alt="" >
        </el-col>
      </el-row>
    </div>
  </div>

  <FootView />  
</div>
</template>

<script>
// @ is an alias to /src
import WOW from "wow.js";
import { Download } from '@element-plus/icons'
import HeadView from '@/components/HeadView.vue'
import FootView from '@/components/FootView.vue'

export default {
  name: 'HomeView',
  data(){
    return {
      // isMobile:false
    }
  },
  mounted(){
    var wow = new WOW();
    wow.init();
  },
  components: {
    HeadView,
    FootView,
    Download,
  }
}

</script>

<style lang="less" scoped>
  .home{
    position: relative;
    background: url('@/assets/img/home-bg.png') no-repeat center top;
    background-size:auto 100%;
    background-color: RGB(64, 76, 255);
    height: 630px;
    // .head_box{position: absolute;top: 0;left: 0;right: 0;}
    .homg-bg-box{
      height: calc(100% - 120px);
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      color: #fff;
      h3{
        font-size: 40px;
        padding: 30px 10%;
        font-weight: bold;
      }
      p{
        padding: 0 15% 30px;
        font-size: 15px;
      }
    }
  }
  .but_down{
    display: flex;
    justify-content: center;
    span{
      // padding: 10px 25px;
      width: 185px;
      background: #fff;
      border-radius: 80px;
      display: inline-block;
      margin: 10px 10px 0;
      a{
        display: flex;
        line-height: 50px;
        justify-content: center;
        align-items: center;
        color: #000;
        font-weight: bold;
        .el-icon{margin-right: 5px;font-size: 22px;font-weight: bold;}
      }
      &:nth-last-child(1){
        background: #000;
        a{
          color: #fff;
        }
      }
    }
  }

  .home-con{padding: 120px 0;}
  .home-con-tc{text-align: center;}
  .home1-img{width: 94%;padding: 0 3%;}
  .home1-r{
    padding:0 0 0 10%;
    h4{font-size: 36px;font-weight: bold;padding-bottom: 20px;}
  }
  .home1-lr{padding: 0 5% 50px;}
  .home1-l{
    padding:0 10% 0 5%;
    h4{font-size: 36px;font-weight: bold;padding-bottom: 20px;}
  }

  @media screen and (max-width: 1200px) and (min-width:992px ) {
    .home{
      height: 580px;
    }
    .homg-bg-box h3{font-size: 36px;padding: 30px 10%;}
  }

  @media screen and (max-width:992px ) and (min-width:768px) {
    .home{
      height: 460px;
      .homg-bg-box h3{font-size: 30px;padding: 20px 7%;}
      .homg-bg-box p{padding: 0 10% 25px;font-size: 13px;}
    }
    .home1-r h4{font-size: 28px;}
  }

  @media screen and (max-width:768px ) {
    .home{
      height: 380px;
      .homg-bg-box h3{font-size: 20px;padding: 10px 5%;}
      .homg-bg-box p{padding: 0 5% 20px;font-size: 12px;}
    }
    .home-con{padding: 50px 5%;}
    .home1-img{margin: 20px 0;}

    .home1-r,.home1-l{
      padding: 0;
      h4{font-size: 20px;}
    }  
    
    .but_down{flex-direction: column;align-items: center;} 
  }

</style>
